<script setup>
/**
 * modal管理组件
 * @Author Mumu 175588516@qq.com
 * @Date 2024/08
 */
import { ref,watch } from 'vue'
import list from './modalsExp.js'
import { useRoute } from 'vue-router';
const route = useRoute()
function execute(fun,index,parmam){
	let item = list.value[index]
	item[fun](parmam)
	list.value.splice(index,1)
}
let moveIng = false
const position = ref({
	bottom: 0,
	right: 0
})
// 移动所有小窗位置
function moveMouse(e,action){
	if(action=='down'){
		moveIng=true
	}else if(action=='up'){
		moveIng=false
	}else if(action=='move'){
		if(!moveIng) return;
		e.preventDefault();
		position.value.bottom = parseInt(position.value.bottom) - e.movementY + 'px'
		position.value.right = parseInt(position.value.right) - e.movementX + 'px'
	}
}
// 监听路由变化之后销毁所有小窗
watch(()=>route.path,()=>{
	list.value=[]
})
</script>

<template>
	<teleport to="#teleported">
		<div class="mocalControl" :style="[position]" v-if="list.length>0">
			<div
				class="btn btn-default moveIco"
				@mousedown="moveMouse($event,'down','move')"
				@mousemove="moveMouse($event,'move')"
				@mouseup="moveMouse($event,'up')"
				@mouseleave="moveMouse($event,'up')"
			>
				<i class="iconfont icon-yidong"></i>
			</div>
			<div class="flex item" v-for="(v,i) in list">
				<div class="flex1 title elli-1" @dblclick="execute('recover',i,true)">{{ v.title }}</div>
				<div class="icon">
					<button type="button" class="btn" @click="execute('recover',i,true)" title="还原窗口">
						<i class="iconfont icon-zuidahua1"></i>
					</button>
					<button type="button" class="btn" @click="execute('close',i,'closebtn')" title="关闭窗口">
						<i class="iconfont icon-cuo"></i>
					</button>
				</div>
			</div>
		</div>
	</teleport>
</template>

<style lang="less" scoped>
.mocalControl{
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
	z-index: 999999999;
	opacity: .9;
	.moveIco{
		position: absolute;
		width: 40px;
		top: -25px;
		left: 0;
		right: 0;
		margin: 0 auto;
		cursor: move;
		display: none;
		opacity: .7;
	}
	&:hover{
		.moveIco{
			display: block;
		}
	}
	.item{
		width: 220px;
		margin: 10px 0;
		background-color: #fff;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
		border-radius: 5px;
		line-height: 40px;
		padding: 0 10px;
		.title{
			font-size: 14px;
		}
		.btn{
			background-color: transparent;
			padding-left: 5px;
			padding-right: 5px;
			outline: none;
			.iconfont{
				font-size: 12px;
			}
		}
	}
}
</style>